<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container" @click="jump()">
    <img src="@/assets/imgs/page.png" class="page" />
    <img src="@/assets/imgs/page1.png" class="page1" />
    <img src="@/assets/imgs/page2.png" class="page2" :class="{ani:flag,ani2:aniFlag}" />
    <p class="text" :class="{ani2:aniFlag}">请在此开启你的线上消费之旅吧</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
        flag:false ,
        aniFlag:false
    };
  },
  methods: {},
  mounted() {
    const that=this;
    setTimeout(()=>{
      that.flag=true;
    },1500)
    setTimeout(()=>{
      that.aniFlag=true;
    },3000)
  },
  methods: {
    jump (){
       this.$router.push({path:'/main'})
    }
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  position: relative;
  background: #09035B;
  height: 100vh;
  img.page {
    display: block;
    width: 100%;
  }
  .page1 {
    position: absolute;
    z-index: 100;
    width: 86%;
    left: 7%;
    top: 8.7rem;
     animation:backInDown 1.5s 1 ;
    -webkit-animation:backInDown 1.5s 1 ;
  }
  .page2 {
    position: absolute;
    z-index: 100;
    width: 36%;
    left: 32%;
    top: 13rem;
    opacity: 0;
    &.ani {
      opacity: 1;
      animation:zoomIn 1.5s 1 ;
      -webkit-animation:zoomIn 1.5s 1 ;
    }
  }
  .text {
    color: #fff;
    position: absolute;
    z-index: 100;
    top: 19.5rem;
    font-size: 0.38rem;
    width: 100%;
    text-align: center;
     animation:backInUp 1.5s 1 ;
    -webkit-animation:backInUp 1.5s 1 ;
  }
  
    .ani2{
        animation:change 2s infinite linear!important;
      -webkit-animation:change 2s infinite linear!important;
    }
@keyframes change{
  0% {transform:scale(1)}
  50% {transform:scale(1.06)}
  100% {transform:scale(1)}
}
@-webkit-keyframes change{
  0% {transform:scale(1)}
  50% {transform:scale(1.06)}
  100% {transform:scale(1)}
}

@-webkit-keyframes backInUp {
    0% {
        opacity: .7;
        -webkit-transform: translateY(1200px) scale(.7);
        transform: translateY(1200px) scale(.7)
    }

    80% {
        opacity: .7;
        -webkit-transform: translateY(0) scale(.7);
        transform: translateY(0) scale(.7)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes backInUp {
    0% {
        opacity: .7;
        -webkit-transform: translateY(1200px) scale(.7);
        transform: translateY(1200px) scale(.7)
    }

    80% {
        opacity: .7;
        -webkit-transform: translateY(0) scale(.7);
        transform: translateY(0) scale(.7)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

  @-webkit-keyframes backInDown {
    0% {
        opacity: .7;
        -webkit-transform: translateY(-1200px) scale(.7);
        transform: translateY(-1200px) scale(.7)
    }

    80% {
        opacity: .7;
        -webkit-transform: translateY(0) scale(.7);
        transform: translateY(0) scale(.7)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes backInDown {
    0% {
        opacity: .7;
        -webkit-transform: translateY(-1200px) scale(.7);
        transform: translateY(-1200px) scale(.7)
    }

    80% {
        opacity: .7;
        -webkit-transform: translateY(0) scale(.7);
        transform: translateY(0) scale(.7)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

  @-webkit-keyframes zoomIn {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.3,.3,.3);
          transform: scale3d(.3,.3,.3)
      }

      100% {
          opacity: 1
      }
  }

  @keyframes zoomIn {
      0% {
          opacity: 0;
          -webkit-transform: scale3d(.3,.3,.3);
          transform: scale3d(.3,.3,.3)
      }

      100% {
          opacity: 1
      }
  }
}
</style>
